<template>
  <div :id="myChart" :style="{ height: height, width: width }"></div>
</template>

<script>
export default {
  name: "hello",
  props: {
    myChart: { type: String, default: "main6" },
    height: { type: String, default: "100%" },
    width: { type: String, default: "100%" },
    type: { type: String, default: "" },
    color: { type: Array, default: [] },
    data1: { type: Array, default:function(){
            return []
        } },
    text: { type: String, default: "扇形图" },
  },
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
    };
  },
  watch:{
    data1(){
      this.drawLine()
    }
  },
  mounted() {
    this.drawLine(); // 初始化
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart1 = this.$echarts.init(document.getElementById(this.myChart));
      // 绘制图表
      let index = 0;
      var img =
        "";

      var colorList = this.color

      myChart1.setOption({
        title: {
          text: this.text,
          padding: [300,0,0,150],
          textStyle: {
            fontSize: 18,
          },
        },
        graphic: {
          elements: [
            {
              type: "image",
              z: 3,
              style: {
                image: img,
                width: 50,
                height: 50,
              },
              left: "center",
              top: "center",
              position: [100, 100],
            },
          ],
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
          icon: this.type,
          padding: [0,100, 0, 800],
        },
        series: [
          {
            type: "pie",
            center: ["50%", "50%"],
            radius: ["26%", "36%"],
            clockwise: true,
            avoidLabelOverlap: true,
            hoverOffset: 15,
            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList[params.dataIndex];
                },
              },
            },
            label: {
              show: false,
              position: "outside",
              formatter: "{b|{b}}\n{a|{d}%}\n{hr|}",
              rich: {
                hr: {
                  backgroundColor: "t",
                  width: 3,
                  height: 3,
                  borderRadius: 3,
                  padding: [3, 3, 0, -12],
                },
                a: {
                  align: "center",
                  padding: [-20, 10, 0, 10],
                  height: 20,
                },
                b: {
                  padding: [-20, 10, -30, 10],
                },
              },
            },
            labelLine: {
              normal: {
                // length: 20,
                // length2: 30,
                // lineStyle: {
                //   width: 1,
                // },
                position: 'inner',
                show: false
              },
            },
            data: this.data1
          },
        ],
      });
    },
  },
};
</script>

<style>
</style>
